<template>
    <div id='tmpl'>
        <div id="muicon" class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item,index) in list" :key="index">
                    <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
                        <img class="mui-media-object" :src="item.img_url">
                        <div class="mui-media-body">{{item.title}}</div>
                        <div class="goodmes">
                            <div>
                                <span class="red">现价:￥{{item.sell_price}}</span>
                                <s>原价:￥{{item.market_price}}</s>
                            </div>
                            <p>
                                <span>热卖中</span>
                                <span class="spanright">剩余{{item.stock_quantity}}件</span>
                            </p>
                        </div>
                    </router-link>
                </li>
                
            </ul>
        </div>
        <mt-button type="primary" size="large" @click="moregoods">获取更多</mt-button>
    </div>
</template>
<script>
import common from '../../kikt/comment.js';
import { Toast } from 'mint-ui';
export default {
    name: "component_name",
    data() {
        return {
            list:[],
            pageindex:1
        };
    },
    created(){
        this.getgoodslist()
        
    },
    methods:{
        getgoodslist:function(){
            var url = common.apidomain +'/api/getgoods?pageindex='+this.pageindex;
            this.$http.get(url).then(function(res){
                if(res.body.status !=0){
                    Toast(res.body.message);
                    return;
                }
                this.list = this.list.concat(res.body.message);
            })
        },
        moregoods(){
            this.pageindex++;
            this.getgoodslist()
        }
    }
}
</script>
<style lang="css" scoped>
#muicon ul {
    padding: 0px;
}

#muicon li {
    padding: 5px 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-right: 0px;
    border-radius: 10px;
    margin-bottom: 5px;
}

#muicon li a {
    margin: 0px;
}

.goodmes {
    text-align: left;
    height: 80px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin-top: 10px;
}
.goodmes div {
     margin-top: 10px;
}
.goodmes .red {
    color: red;
    padding-right: 5px;
   
}
.goodmes p {
    margin-top: 10px;
    color: red;
}
.goodmes s {
    font-size: 14px;
}

.goodmes .spanright {
    float: right;
    padding-right: 15px;
    color: black;
}
</style>